import { memo, useState } from "react";
import { Card, Form, Input, Button } from "antd";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { useMessage } from "@/hooks/useMessage";
import style from "../Login/index.module.less";
// import BG from "@/utils/BG"; // Temporarily comment out
import { register } from "./api";

const Register = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const { success, error, contextHolder } = useMessage();

  const onFinish = async (values) => {
    if (values.password !== values.confirm) {
      form.setFields([
        {
          name: "confirm",
          errors: ["两次密码不一致"],
        },
      ]);
      return;
    }
    setLoading(true);
    try {
      const res = await register(values.username, values.password);
      if (res.code === 200 || res.success) {
        success({ content: "注册成功，请登录" });
        navigate("/login", { state: { fromRegister: true } });
      } else {
        error({ content: res.message || "注册失败" });
      }
    } catch (e) {
      error({ content: e.response?.data?.message || "注册失败" });
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      {contextHolder}
      <div className={style.login} style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh'
      }}>
        <Card className={style.loginCard} style={{
          backgroundColor: 'rgba(247, 247, 247)',
          width: '400px',
          borderRadius: '10px',
          padding: '20px',
          zIndex: 99
        }}>
          <div className={style.logo} style={{
            width: '100%',
            height: '55px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            fontSize: '22px',
            zIndex: 99,
            marginBottom: '24px',
            fontWeight: 600,
            color: 'rgba(0, 0, 0, 0.85)',
            textAlign: 'center'
          }}>CoDoc</div>
          <Form
            form={form}
            onFinish={onFinish}
            validateTrigger="onBlur"
            style={{ marginTop: 20 }}
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: "请输入账号" }]}
            >
              <Input
                prefix={<UserOutlined />}
                size="large"
                placeholder="请输入账号"
                className={style.logoInput}
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                size="large"
                placeholder="请输入密码"
                className={style.logoInput}
              />
            </Form.Item>
            <Form.Item
              name="confirm"
              rules={[{ required: true, message: "请确认密码" }]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                size="large"
                placeholder="请确认密码"
                className={style.logoInput}
              />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                size="large"
                block
                loading={loading}
              >
                注册
              </Button>
            </Form.Item>
          </Form>
          <div style={{ textAlign: "center" }}>
            已有账号？
            <span
              style={{ color: "#1677ff", cursor: "pointer", marginLeft: 4 }}
              onClick={() => navigate("/login")}
            >
              去登录
            </span>
          </div>
        </Card>
      </div>
      {/* <BG /> */}
    </div>
  );
};

export const MemoRegister = memo(Register);